<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.dailog {
				width: 300px;
				height: 200px;
				border: #CCCCCC solid 1px;
				border-radius: 10px;
				position: fixed;
				left: 30%;
				top: 100px;

			}

			.ishid {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="container">
			父组件控制子组件的显示：
			<input type="button" :value="[isshow==true?'隐藏':'显示']" @click="isshow=!isshow" />
			<br />
			<!-- <my-dialog :visible="isshow" @update:visible="isshow=$event"></my-dialog> -->
			<!-- .sync直接和父组件进行绑定 -->
			<my-dialog :visible.sync="isshow"></my-dialog>
		</div>
		<script type="text/javascript">
			var mydialog = {
				props: {
					visible: {
						type: Boolean,
						default: false
					}
				},
				methods: {
					close() {
						//触发事件 
						this.$emit("update:visible", false);
					}
				},
				template: `
					<div class="dailog" :class="{ishid:!visible}">
						<input type="button" value="关闭" @click="close"/>
					</div>
                `
			}



			var app = new Vue({
				el: "#container",
				data: {
					isshow: false
				},
				components: {
					"my-dialog": mydialog
				},
			})
		</script>
	</body>
</html>
